<template>
  <el-card>
    <form-build v-if="pageConfig.buildKey!=null" ref="pageGenerBuild"
                :formBuildKey="pageConfig.buildKey"
                :dictOptions="dictOptions"/>
    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-100px;margin-top:10px;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { optionselect as getDictOptionselect } from "@/api/system/dict/type";
import request from "@/utils/request";

export default {
  name: "PageGenerBuild",
  components: {
    //表单设计器
    FormBuild: () => import('@/views/youshuda/components/FormBuild')
  },
  data() {
    return {
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 290 + "px",
      // 字典信息
      dictOptions: [],
      //页面配置信息
      pageConfig:{
        tabGenId: '', //表单设计Key
        buildKey: '', //表单设计Key
        isFrame:'1',//是否为外链（0是 1否）
        path: '', //路由地址
        $routerPath: '', //前端路由地址（临时使用）
        $routerName: '', //前端路由名称（临时使用）
        $routerTitle: '' //菜单名称
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    /** 初始化 **/
    init(){
      this.pageConfig=this.$route.query
      if(this.pageConfig==undefined || !this.strIsNotEmpty(this.pageConfig['buildKey'])){
        this.msgError("菜单配置异常，未获取到表单设计KEY");
        return;
      }
      //打开加载框
      this.openLoading();
      /** 查询字典下拉列表 */
      getDictOptionselect().then(response => {
        this.dictOptions = response.data;
      });
      //关闭加载框
      this.closeLoading();
    },
    /** 提交按钮 */
    submitForm() {
      this.openLoading();
      //表单设计信息
      const fromBuildConfig = this.$refs.pageGenerBuild.drawingList;
      const clientType = this.$refs.pageGenerBuild.clientType;
      request({
        url: 'page/gener/build/save',
        method: 'post',
        data: {
          "formBuildKey": this.pageConfig['buildKey'],
          "menuTitle": this.pageConfig['$routerTitle'],
          "clientType": clientType,
          "fromBuildConfig": fromBuildConfig
        }
      }).then(res => {
        this.$modal.msgSuccess(res.msg);
        if (res.code === 200) {
          this.close();
          //关闭加载框
          this.closeLoading();
        }
      })
    },
    /** 关闭按钮 */
    close() {
      //是否刷新
      if(this.pageConfig['isRefresh'] == '1'){
        this.refreshRoute();
      }else{
        let redirectPath = this.pageConfig.$routerPath;
        if(redirectPath){
          let path ={ path: redirectPath, query: { t: Date.now() } };
          this.$tab.closeOpenPage(path);
        }
      }
    },
    refreshRoute() {
      const currentPath = this.pageConfig.$routerPath;
      const refreshedRoute = this.$router.resolve({ path: currentPath });
      window.location.href = refreshedRoute.href;
    },
  }

};
</script>

<style lang="scss" scoped>

  .config-divider .el-divider__text{
    font-weight: bold !important;
  }

  .columnInfo-box{
    width: 100%;
    display: flex;

    .column-table{
      //width: 70%;
    }
    .column-config{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;

      .title{
        width: 100%;
        text-align: center;
        font-weight: bold;
        font-size: 13px;
        height: 43px;
        line-height: 43px;
        border-bottom: 1px solid #EBEEF5;
      }

      .column-form{
        overflow-y: scroll;
        padding: 20px 10px;
      }
    }
  }

</style>
